import React from 'react'


import { getCurrentCity } from '../../utils/index'


import SearchHeader from '../../components/SearchHeader/index'
//导入Flex布局
import { Flex } from 'antd-mobile'
//导入module.index.css的样式
import styles from './index.module.css'

import Filter from './components/Filter/index'

//导入请求
import { instance } from '../../utils/api'

//从react virtualized 中导入List组件
import { List, WindowScroller, AutoSizer, InfiniteLoader } from 'react-virtualized'

//导入BASE_URL
import { BASE_URL } from '../../utils/url'

//导入HouseItem组件
import HouseItem from '../../components/HouseItem'

//导入 Sticky 组件
import Sticky from '../../components/Sticky'

//导入loading的组件库
import { Toast } from 'antd-mobile'

//导入当没有房源数据的组件
import NoHouse from '../../components/NoHouse'





/* 注意组件外部的代码只会在项目加载时执行一次。且在切换路由的时候，不会重新执行！ */



/* 

实现加载房源数据时：加载中、加载完成的提示（需要解决：没有房源数据时，不弹提示框）
    判断一下count是否为0，如果为0，就不加载提示信息
找不到房源数据时候的提示（需要解决：进入页面就展示该提示的问题）
    判断一下是否是第一次进入，可以用一个变量来进行记录，然后只要进行了数据请求，就把这个标识更改

*/

export default class HouseList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            //总计的数量
            count: 0,
            list: [],
            //数据是否加载中
            isLoading: true
        }
        this.filters = {}
    }

    // 初始化默认值
    label = ''
    value = ''

    // 初始化实例属性
    filters = {}

    async componentDidMount() {
        // console.log('HouseList -> did mount')
        const { label, value } = await getCurrentCity()
        this.label = label
        this.value = value

        this.searchHouseList()
    }

    //提供给Filter组件调用的函数，接收filters
    onFilters = filters => {
        this.filters = filters
        this.searchHouseList()
        //调用window.scrollTo()方法来返回顶部
        window.scrollTo(0, 0)
    }

    //获取房源列表的函数
    async searchHouseList() {

        //开启loading
        Toast.loading('加载中...', 0, null, false)

        const { data: res } = await instance.get('/houses', {
            params: {
                cityId: this.value,
                ...this.filters,
                start: 1,
                end: 20
            }
        })
        const { count, list } = res.body

        // 关闭loading
        Toast.hide()

        //提示房源信息
        //解决了没有房源数据时，也有弹窗提示的bug
        if (count !== 0) {
            Toast.info(`共找到了${count}套房源`, 2, null, false)
        }

        this.setState(() => {
            return {
                count,
                list,
                //数据完成的状态
                isLoading: false
            }
        })
    }


    //渲染长列表的房屋列表项
    rowRenderer = ({
        key, // 唯一key值
        index, // 索引号
        style, // 重点属性！！一定要给每一行数添加该样式
    }) => {
        const { list } = this.state
        const house = list[index]

        //在renderHouseList方法中，判断house是否存在
        if (!house) {
            return (
                <div key={key} style={style}>
                    <p className={styles.loading}></p>
                </div>
            )
        }

        return (
            <HouseItem
                key={key}
                //注意：该组件中应该接收 style，然后给组件元素设置样式！！
                onClick={() => this.props.history.push(`/detail/${house.houseCode}`)}
                style={style}
                src={BASE_URL + house.houseImg}
                title={house.title}
                desc={house.desc}
                tags={house.tags}
                price={house.price}
            ></HouseItem>
        )
    }

    isRowLoaded = ({ index }) => {
        return !!this.state.list[index];
    }

    loadMoreRows = async ({ startIndex, stopIndex }) => {
        const res = await instance.get('/houses', {
            params: {
                cityId: this.value,
                ...this.filters,
                start: startIndex,
                end: stopIndex
            }
        })
        const { list } = res.data.body
        console.log(list);
        //获取到最新的数据后，与当前list中的数据合并，再更新state，并调用Promise的resolve
        this.setState(() => (
            { list: [...this.state.list, ...list] }
        ))
        return res
    }

    //渲染列表数据
    renderList = () => {
        const { count, isLoading } = this.state
        // 关键点：在数据加载完成后，再进行 count 的判断
        // 解决方式：如果数据加载中，则不展示 NoHouse 组件；而，但数据加载完成后，再展示 NoHouse 组件
        if (count === 0 && !isLoading) {
            return <NoHouse>没有找到房源，请您换个搜索条件吧~</NoHouse>
        }
        return (
            <InfiniteLoader
                isRowLoaded={this.isRowLoaded}
                loadMoreRows={this.loadMoreRows}
                rowCount={this.state.count}
            >
                {({ onRowsRendered, registerChild }) => (
                    <WindowScroller>
                        {({ height, isScrolling, scrollTop }) => (  //这三个属性是必传的
                            <AutoSizer>
                                {({ width }) => (
                                    <List
                                        onRowsRendered={onRowsRendered}
                                        ref={registerChild}
                                        autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
                                        // 组件的宽度
                                        width={width} // 视口宽度
                                        // 组件的高度
                                        height={height} // 视口高度
                                        rowCount={this.state.count} // List列表项总条目数
                                        // 每行的高度
                                        rowHeight={120} // 每一行高度
                                        rowRenderer={this.rowRenderer}
                                        isScrolling={isScrolling}
                                        scrollTop={scrollTop}
                                    />
                                )}
                            </AutoSizer>
                        )}
                    </WindowScroller>
                )}
            </InfiniteLoader>
        )
    }






    render() {
        console.log(this.label);
        console.log(this.label + '1');
        return (
            <>
                <Flex className={styles.header}>
                    <i className='iconfont icon-back' onClick={() => this.props.history.go(-1)}></i>
                    <SearchHeader currentCity={this.label} className={styles.searchHeader} />
                </Flex>
                {/* 条件筛选栏 */}
                <Sticky height={40}>
                    <Filter onFilters={this.onFilters} />
                </Sticky>
                {/* 房屋列表渲染 */}
                <div className={styles.houseItems}>
                    {this.renderList()}
                </div>
            </>
        )
    }
}
